<template>
  <div class="news">
    <div class="news-lists" 
          v-for="(item, index) in news" 
          :key="index"
          @click="gotoNews(item)">
        <div class="news-img">
          <img :src="item.pic" width="100%" height="100%"/>
          <div class="content">
              <div class="right-title">{{item.title}}</div>
              <div class="right-desc">{{item.descript}}</div>
              <div class="btn">查看详情</div>
          </div>
        </div>
      </div>
  </div>
</template>

<script>
import PATH from '../../router/constant'
export default {
    data() {
        return {
            news: []
        }
    },
    methods: {
        gotoNews(item) {
            this.$router.push({
                path: PATH.NEWSDATA,
                query: {
                    id: item.id
                }
            })
        }
    },
    mounted() {
        this.$API.getNews().then(res=> {
            // console.log(res.data.data)
            this.news = res.data.data
        })
    }
}
</script>

<style scoped>
.news {
    margin-top: 1.1rem;
}
.news-img {
    position: relative;
    width: 100%;
    height: 3.8rem;
    margin: 0.2rem 0;
}
.content {
    position: absolute;
    top: 0.5rem;
    width: 100%;
    color: white;
    font-size: 0.4rem;
    text-align: center;
}
.right-title {
    width: 6rem;
    margin: 0.5rem auto;
    font-size: 0.4rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.right-desc {
    width: 6rem;
    margin: 0 auto;
    font-size: 0.3rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.btn {
    display: inline-block;
    height: 0.5rem;
    margin: 0.2rem auto;
    font-size: 0.25rem;
    border: 0.01rem solid #fff;
    line-height: 0.5rem;
    padding: 0 0.3rem;
    border-radius: 0.5rem;
}
</style>